import React, {useEffect, useState} from 'react';
import {Button, Card, Descriptions, message, Space, Steps} from 'antd';
import {useModel, useParams} from "@@/exports";
import {changeOrderStatus, getOrderDetail} from "@/services/backend/OrderController";
import moment from "moment";

const App: React.FC = () => {
  const { id } = useParams();
  // @ts-ignore
  const [dataList, setDataList] = useState<Admin.Order>({});
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  const myAccount=currentUser?.userAccount;

  /**
   * 搜索
   */
  const doSearch = async () => {
    try {
      const res=await getOrderDetail(Number(id));
      setDataList(res)
    } catch (error: any) {
      message.error('获取数据失败，' + error.message);
    }
  };

  useEffect(() => {
    doSearch();
  },[0]);

  const onChange = (value: number) => {
    let {id,orderId,goodsName,userAccount,orderStatus,checkoutTime}=dataList;
    if(orderStatus<=2){
      if(orderStatus===0&&myAccount!==userAccount){
        orderStatus+=1;
      }
      if(orderStatus===1&&myAccount===userAccount){
        orderStatus+=1;
      }
      // @ts-ignore
      setDataList({orderId,goodsName,userAccount,orderStatus,checkoutTime});
      // @ts-ignore
      changeOrderStatus(id,orderStatus);
    }

  };

  return (
    <>
      <Card>
        <Descriptions>
          <Descriptions.Item label="订单编号">{dataList.orderId}</Descriptions.Item>
          <Descriptions.Item label="商品">{dataList.goodsName}</Descriptions.Item>
          <Descriptions.Item label="买家">{dataList.userAccount}</Descriptions.Item>
          <Descriptions.Item label="下单时间">
            {dataList.checkoutTime===null?"":moment(dataList.checkoutTime).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <div style={{ marginBottom: 24 }} />
      <Card>
        <Steps
          size="small"
          current={dataList.orderStatus}
          onChange={onChange}
          items={[
            {
              title: '下单',
            },
            {
              title: '商家已发货',
            },
            {
              title: '完成',
            },
          ]}
        />
      </Card>
      <div style={{ marginBottom: 24 }} />
    </>
  );
};

export default App;
